<template>
  <el-dialog custom-class="inner-dialog abn-dialog"
    :before-close="onClose"
    visible
    fullscreen>
    <template #title>
      <span class="xz-confirm-title">
        <svg-icon :iconClass="appCfg.logo"/>
          {{appCfg.name}}
      </span>
    </template>
    <div class="msg-content">
      <svg-icon iconClass="error" className="msg-content_icon"/>
      <div class="msg-content_text">
        您的账号已冻结，请联系客服进行解冻！<br>QQ：{{kefuQQ}}
      </div>
    </div>
    <div slot="footer" class="ps-confirm__btns">
      <el-button @click="openKefuUrl" type="primary" size="small">联系客服</el-button>
      <el-button @click="onClose" size="small">取消</el-button>
    </div>
  </el-dialog>
</template>

<script type="text/javascript">
import { mapGetters } from 'vuex'
import { kefuQQ } from '@/utils/costum'
import { openKefu } from '@/utils/judge'
export default {
  name: 'AccountAbnormal',
  data () {
    return {
      kefuQQ
    }
  },
  computed: {
    ...mapGetters(['appCfg', 'appInfo'])
  },
  created () {
    this.$xz('xz_set_window_size', 'XZDesktopFrozen', 365 + 16, 192 + 16)
    this.$xz('xz_page_load_finished', 'XZDesktopFrozen')
  },
  methods: {
    openKefuUrl () {
      openKefu()
    },
    onClose () {
      this.$xz('xz_switch_dialog', 'XZDesktopFrozen', false)
    },
    openUrl (url) {
      this.$xz('xz_open_url', url)
    }
  }
}
</script>
<style lang="scss">
.abn-dialog{
  box-shadow: none;
  border: 0;
  border-radius: 0;
  .el-dialog__body{
    padding: 30px 30px 20px;
  }
  .msg-content{
    display: flex;
    align-items: center;
    justify-content: center;
    &_icon{
      font-size: 32px;
      margin-right: 10px;
      flex: 0 0 32px;
    }
    &_text{
      text-align: center;
      line-height: 22px;
      color: #fff;
    }
  }
  .el-dialog__footer{
    padding-bottom: 24px;
    text-align: center;
    .el-button{
      width: 80px;
    }
  }
}
</style>
